<!-- 通讯录 -->
<template>
	<view>
		<view v-if="isLong">
			<!-- 搜索 -->
			<search placeholder='输入搜索关键词' @searchKey="searchKey"></search>

			<view v-if="hasInfo">
				<scroll-view scroll-y class="indexes" :scroll-into-view="'indexes-'+ listCurID"
					:style="[{height:'90vh'}]" :scroll-with-animation="true" :enable-back-to-top="true">
					<block v-for="(item,index) in list" :key="index">
						<view :class="'indexItem-' + item.initials" :id="'indexes-' + item.initials"
							:data-index="item.initials">
							<view style="padding: 22rpx;color: #AFAFAF;font-size: 23rpx;">{{item.initials}}</view>
							<view class="cu-list menu-avatar">
								<view class="cu-item" v-for="(items,sub) in item.staffs" :key="sub">
									<view class="head-icon">
										<image src="../../../static/icon/i-tx.png" mode="aspectFit"></image>
									</view>
									<view class="content">
										<view class="text-grey"><text class="text-abc">{{items.name}}</text></view>
										<view class="text-gray text-sm">
											{{items.orgName}}-{{items.tel}}
										</view>
									</view>
									<view class="action">
										<image src="../../../static/icon/i-dh.png" mode="aspectFit"
											@tap="_callPhoto(items.tel)" />
									</view>
								</view>
							</view>
						</view>
					</block>
				</scroll-view>
				<view class="indexBar" style="padding-left: 0px;">
					<view class="indexBar-box" @touchstart="tStart" @touchend="tEnd" @touchmove.stop="tMove">
						<view class="indexBar-item" :style="{color:(item.initials == listCur ? '#1585FC':'')}"
							v-for="(item,index) in list" :key="index" :id="index" @touchstart="getCur"
							@touchend="setCur">
							{{item.initials}}
						</view>
					</view>
				</view>
				<!--选择显示-->
				<view v-show="!hidden" class="indexToast">
					{{listCur}}
				</view>
			</view>
			<!-- 暂无数据 -->
			<view v-else>
				<noData :noDataText="noDataText" :buttonShow="buttonShow"></noData>
			</view>
			
		</view>

		<view v-else>
			<!-- 网络错误 -->
			<netError v-if="!hasNet" @refresh="refresh()"></netError>
		</view>

	</view>

</template>

<script>
	import {
		getStaffInfos
	} from '@/api/common';
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				list: [],
				name: '',
				hidden: true,
				listCurID: '',
				listCur: '',

				isLong: false, // 是否加载完成
				hasNet: true, // 是否有网络
				hasInfo: false, // 是否有数据
				noDataText: '暂无信息',
				buttonShow:false
			}
		},
		computed: {
			...mapState('user', ['userInfo', 'token'])
		},
		onLoad() {
			// if (this.token == '' || this.token == null) {
			// 	return;
			// }
			// uni.showLoading({
			// 	title: '加载中'
			// })
			// this._loadStaffInfo();
		},
		onShow() {
			if (this.token == '' || this.token == null) {
				uni.showModal({
					title: '提示',
					content: '请先登陆',
					showCancel: false,
					success: ({
						confirm,
						cancel
					}) => {
						if (confirm) {
							uni.switchTab({
								url: '/pages/example/my/my'
							});
						}
					}
				});
				return;
			}
			this._loadStaffInfo();
		},
		onReady() {
		},
		methods: {
			_loadStaffInfo: function() {
				var data = {
					page: 1,
					row: 99999,
					storeId: this.userInfo.storeId,
					name: this.name
				}
				var that = this
				getStaffInfos(data).then((res) => {
					console.log('获取通讯录列表', res)
					if (res.staffs.length == 0) { //暂无数据
						that.hasInfo = false
						that.isLong = true;
						uni.hideLoading()
						return;
					}

					let _staffs = [];

					res.staffs.sort(function(a, b) {
						return (a.initials + '').localeCompare(b.initials + '')
					})
					that.list = that._formatList(res.staffs, 'initials')
					that.listCur = that.list[0].initials;
					
					uni.hideLoading()
					that.hasInfo = true;
					that.isLong = true;
					that.loading = false
				}).catch(function(reason) {
					that.list = []
					that.hasNet = false;
					that.isLong = false;
				})

			},
			_callPhoto: function(_photo) {
				uni.makePhoneCall({
					// 手机号
					phoneNumber: _photo,

					// 成功回调
					success: (res) => {
						console.log('调用成功!')
					},

					// 失败回调
					fail: (res) => {
						console.log('调用失败!')
					}

				});
			},
			_searchStaff: function() {
				this._loadStaffInfo();
			},
			_formatList: function(arr, keyword) {
				let newArr1 = [];
				let tempArr = [];
				let reg = /\b(\w)|\s(\w)/g;
				let k = 0;
				let firstWord = arr[0][keyword]; //获取第一个分类字母
				arr.map((v) => {
					if (firstWord == v[keyword]) {
						tempArr.push(v);
						newArr1[k] = {
							initials: firstWord,
							staffs: tempArr
						}
					} else {
						//这里循环到这表示已经第二个字母了
						firstWord = v[keyword]; //设置第二字母
						tempArr = []; //把之前的清除掉
						tempArr.push(v); //添加第一个
						newArr1[++k] = { //自增
							initials: firstWord,
							staffs: tempArr
						}
					}
				});
				return newArr1;
			},
			//获取文字信息
			getCur: function(e) {
				this.hidden = false;
				this.listCur = this.list[e.target.id].initials;
				console.log(this.listCur);
			},
			setCur: function(e) {
				this.hidden = true;
				this.listCur = this.listCur
			},
			//滑动选择Item
			tMove: function(e) {
				let y = e.touches[0].clientY,
					offsettop = this.boxTop,
					that = this;
				//判断选择区域,只有在选择区才会生效
				if (y > offsettop) {
					let num = parseInt((y - offsettop) / 20);
					this.listCur = that.list[num].initials
				};
			},

			//触发全部开始选择
			tStart: function() {
				this.hidden = false
			},

			//触发结束选择
			tEnd: function() {
				this.hidden = true;
				this.listCurID = this.listCur;
			},
			indexSelect: function(e) {
				let that = this;
				let barHeight = this.barHeight;
				let list = this.list;
				let scrollY = Math.ceil(list.length * e.detail.y / barHeight);
				for (let i = 0; i < list.length; i++) {
					if (scrollY < i + 1) {
						that.listCur = list[i].initials;
						that.movableY = i * 20
						return false
					}
				}
			},
			searchKey: function(key) {
				console.log('关键词', key)
				this.name = key
				this._loadStaffInfo()
			},
			// 重新刷新
			refresh: function() {
				uni.showLoading({
					title: '加载中'
				})
				this._loadStaffInfo();
			}
		}
	}
</script>

<style lang="scss">
	.photo_icon {
		font-size: 40upx;
		color: #0081FF;
		margin-right: 60upx;
	}


	.indexes {
		position: relative;
	}

	.indexBar {
		position: fixed;
		right: 0px;
		// bottom: 600upx;
		bottom:20vh;
		padding: 0upx 16upx 0upx 60upx;
		display: flex;
		align-items: center;
	}

	.indexBar .indexBar-box {
		width: 40upx;
		height: auto;
		background: #fff;
		display: flex;
		flex-direction: column;
		box-shadow: 0px 4rpx 16rpx 0px rgba(194, 194, 194, 0.5);
		border-radius: 8rpx;
	}

	.text-abc {
		color: #444444;
		font-size: 28rpx;
	}

	.indexBar-item:nth-child(1) {
		margin-top: 5upx;
	}

	.indexBar-item {
		flex: 1;
		width: 40upx;
		height: 40upx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24upx;
		color: #888;
		margin-bottom: 5upx;
	}

	.indexToast {
		position: fixed;
		top: 0;
		right: 80upx;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		width: 100upx;
		height: 100upx;
		border-radius: 10upx;
		margin: auto;
		color: #fff;
		line-height: 100upx;
		text-align: center;
		font-size: 48upx;
	}


	/* ==================
	          列表
	 ==================== */

	.cu-list+.cu-list {
		margin-top: 30upx
	}

	.cu-list>.cu-item {
		transition: all .6s ease-in-out 0s;
		transform: translateX(0upx)
	}

	.cu-list.menu-avatar {
		overflow: hidden;
	}

	.cu-list.menu-avatar>.cu-item {
		position: relative;
		display: flex;
		padding-right: 10upx;
		height: 140upx;
		background-color: #ffffff;
		justify-content: flex-end;
		align-items: center;
		padding-right: 80rpx;
	}



	.cu-list.menu-avatar>.cu-item .content {
		position: absolute;
		left: 146upx;
		width: calc(100% - 96upx - 60upx - 120upx - 20upx);
		line-height: 1.6em;
	}

	.cu-list.menu-avatar>.cu-item .content .text-gray {
		color: #AFAFAF;
		font-size: 23rpx;
	}

	.cu-list.menu-avatar>.cu-item .action {
		width: 34rpx;
		height: 34rpx;
		text-align: center
	}

	.cu-list.menu-avatar>.cu-item .action image {
		width: 100%;
		height: 100%;
	}

	.cu-list.menu-avatar>.cu-item .action view+view {
		margin-top: 10upx
	}

	.cu-list.menu-avatar.comment>.cu-item .content {
		position: relative;
		left: 0;
		width: auto;
		flex: 1;
	}


	.cu-list.menu>.cu-item {
		position: relative;
		display: flex;
		padding: 0 30upx;
		min-height: 100upx;
		background-color: #ffffff;
		justify-content: space-between;
		align-items: center
	}

	.cu-list.menu>.cu-item:last-child:after {
		border: none
	}

	.head-icon {
		position: absolute;
		left: 16px;
		width: 90rpx;
		height: 90rpx;
	}

	.head-icon>image {
		width: 100%;
		height: 100%;
	}
</style>
